<!--  -->
<template>
  <div>
    <!-- <!1:-- scroll-view设置滚动 横向排列使用display:flex无效 -->

    <scroll-view scroll-x class="scroll-row">
      <view v-for="item in 10" class="scroll-row-item">
        {{ item }}
      </view>
    </scroll-view>
    <!-- -------------------------css------------------ -->
    <style>
      .scroll-row {
        /* white-space: normal;控制文字不自动换行 */
        width: 100%;
        white-space: normal;
      }
      .scroll-row-item {
        display: inline-block !important;
      }
    </style>

    <!-- 顶部滚动选项卡滚动的时候下面的内容跟着联动 -->
    <!-- 解决1 -->
    <!-- 顶部的scrool-view 会有一个index  -->
    <!-- 下面的内容设置 swiper 里面的属性current(当前所在滑块的 index)和scroll-row的index相同
    意思是当前的内容滑块和scroll-view的滑块相同
     -->
    <!-- 滑动scrool-view下面的内容一块滚动 -->
    <!-- 解决2 -->
    <!-- 下面的内容滚动上面的scrool-view也跟着滚动 -->
    <!-- swiper上绑定一个@change事件 eg:@change="onChange"  onChange(e){e.detail.current} 
    把e.detail.current传给scroll-view
    -->

    <!-- api里面的设备信息  uni.getSystemInfo(OBJECT)   获取设备的信息
    
    windowHeight(px)可使用窗口的高度 已经减去底部和顶部导航栏 
    
    rpx转px uni.upx2px-->
	
	<!-- 新建一个项目选择组件接口的项目创建。
		拓展组件对应的文件在 pages下的extUi
		接口对应的文件在pages下的API
		
	-->
	
  </div>
</template>

 